<template>
  <div class="app-container">
    <!-- 查询区域 -->
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="学号">
        <el-input v-model="formInline.code" placeholder="学号"></el-input>
      </el-form-item>
      <el-form-item label="姓名">
        <el-input v-model="formInline.name" placeholder="姓名"></el-input>
      </el-form-item>
      <el-form-item label="班级">
        <el-input v-model="formInline.clas" placeholder="班级"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>

    <!-- 添加 -->
    <el-button type="primary" @click="handleAddRole()">添加</el-button>



    <el-table v-loading="listLoading" :data="list" element-loading-text="Loading" border fit highlight-current-row>
      <el-table-column align="center" label="班级" width="200">
        <template slot-scope="scope">
          {{ scope.row.clas }}
        </template>
      </el-table-column>
      <el-table-column label="学号" width="200" align="center">
        <template slot-scope="scope">
          {{ scope.row.code }}
        </template>
      </el-table-column>
      <el-table-column label="姓名" width="150" align="center">
        <template slot-scope="scope">
          {{ scope.row.name}}
        </template>
      </el-table-column>
      <el-table-column label="情况" width="150" align="center">
        <template slot-scope="scope">
          {{ scope.row.status}}
        </template>
      </el-table-column>
      <el-table-column label="时间" width="200" align="center">
        <template slot-scope="scope">
          {{ scope.row.time}}
        </template>
      </el-table-column>

      <el-table-column label="操作" align="center" width="230" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="editattendance(scope.row.code)">
            修改
          </el-button>

          <el-button type="danger" size="mini" @click="deleteById(scope.$index,scope.row)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--分页区域-->
    <div class="el-pagination">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :page-sizes="[6, 10, 12, 14]" :page-size="6" layout="total, sizes, prev, pager, next, jumper" :total="50">
      </el-pagination>
    </div>

    <el-dialog :visible.sync="dialogVisible" :title="dialogType==='edit'?'编辑':'添加'">
      <el-form :model="editattendance" label-width="80px" label-position="left">
        <el-form-item label="学号">
          <el-input v-model="editattendance.code" placeholder="学号" />
        </el-form-item>
        <el-form-item label="姓名">
          <el-input v-model="editattendance.name" placeholder="姓名" />
        </el-form-item>
        <el-form-item label="班级">
          <el-input v-model="editattendance.clas" placeholder="班级" />
        </el-form-item>
        <el-form-item label="出勤情况">
          <el-input v-model="editattendance.status" placeholder="出勤情况" />
        </el-form-item>
        <el-form-item label="时间">
          <el-input v-model="editattendance.time" placeholder="时间" />
        </el-form-item>
      </el-form>

      <div style="text-align:right;">
        <el-button type="danger" @click="dialogVisible=false">取消</el-button>
        <el-button type="primary" @click="confirmSrudent">确定</el-button>
      </div>

    </el-dialog>
  </div>
</template>

<script>
  import {
    getList
  } from '../../../../api/attendance/tableOne.js'
  import{
    delTableA
  }from '../../../../api/attendance/tableOne.js'

const defaultRole = {
    code: '',
    name: '',
    clas: '',
    status: '',
    time: '',
  }

  export default {
    filters: {
      statusFilter(status) {
        const statusMap = {
          published: 'success',
          draft: 'gray',
          deleted: 'danger'
        }
        return statusMap[status]
      }
    },
    data() {
      return {
        // 查询区域
        formInline: {
                  code: '',
                  name: '',
                  clas: ''
        },
        editattendance: Object.assign({}, defaultRole),
        dialogVisible: false,

        list: null,
      }
    },
    created() {
      this.fetchData()
    },

    methods: {
      editattendance(code){
        this.$router.push("/form/editattendance/index/"+code)
      },

      // 查询
      onSubmit() {
             console.log('submit!');
      },

      // 添加
      handleAddRole() {
        this.student = Object.assign({}, defaultRole)
        this.dialogType = 'new'
        this.dialogVisible = true
      },

      // 分页区域
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      },

      //删除
      deleteById(idx,row){
        alert("删除成功");
        console.log("索引",idx);
        console.log("第",row,"行数据");
        console.log(row.id)
        delTableA(row.id).then((res)=>{
          console.log(res)
        })
      },
      
      fetchData() {
        var vm = this;
        getList().then(res => {
          console.log(res.content);
          vm.list = res.content;
        })
      }
      
    }
  }
</script>
